<template>
	<view>
		<view class="content" v-if="isReward == 0">
			<!-- 进度条容器，悬浮在右上角 -->
			<view class="circle-container">
				<view class="background-overlay"></view>
				<canvas canvas-id="circle" style="width: 80px; height: 80px;"></canvas>
				<image :src="centerImage" :class="{'shake-animation': isShaking}" class="center-image" />
				<view class="curcleTit"> {{ isComplete? '已获取': coin+'金币' }}</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				intervalId: null,
				percentage: 0, // 初始进度百分比
				centerImage: 'https://image.shanghepu.com/cdn/images/sala2.png', // 中心图片路径
				isShaking: false, // 是否应用抖动动画
				sec: 10,
				coin: 0,
				isReward: 1,
				isComplete: false,
			};
		},
		mounted() {
			// this.startCountdown();
		},
		methods: {
			startCountdown(data) {
				// this,.
				this.isReward = data.remand;
				this.coin = data.coin;
				this.sec = data.second;
				this.animateProgress();
			},
			drawCircle(percentage) {
				// ... 你之前的绘制圆环进度条的代码
				const ctx = uni.createCanvasContext('circle', this);
				const angle = percentage * 3.6; // 满分为360度
				const centerX = 40; // 画布中心x坐标
				const centerY = 40; // 画布中心y坐标

				// 绘制背景圆
				ctx.beginPath();
				ctx.arc(centerX, centerY, 25, 0, 2 * Math.PI);
				ctx.setLineWidth(5);
				ctx.setStrokeStyle('rgba(0, 0, 0, 0.3)');
				ctx.stroke();

				// 绘制进度圆环
				ctx.beginPath();
				ctx.arc(centerX, centerY, 25, -90 * Math.PI / 180, (angle - 90) * Math.PI / 180);
				ctx.setLineWidth(5);
				ctx.setStrokeStyle('#ea9518');
				ctx.stroke();

				// 绘制到画布
				ctx.draw();
			},
			animateProgress() {
				// 假设这个方法以动画的形式逐渐增加进度
				let progress = 0;
				this.intervalId = setInterval(() => {
					this.percentage = progress;
					if (progress >= 100 && !this.isShaking) {
						this.isShaking = true; // 开始抖动
						setTimeout(() => {
							this.isShaking = false; // 1秒后停止抖动
						}, 1000);
					}
					if (progress >= 100) {
						clearInterval(this.intervalId);
						this.isComplete = true;
						// this.$util.Tips({
						// 	title:"已获取奖励"
						// })
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							title: '失败主题',
							message: "已获取奖励金币"+this.coin+"个",
						})
					}
					this.drawCircle(this.percentage);
					progress++;
				}, this.sec * 10);
			},
			stopCountdown() {
				clearInterval(this.intervalId);
				this.intervalId = null;
			}
		}
	};
</script>

<style scoped>
	.countdown-container {
		position: fixed;
		top: 290rpx;
		/* 或者 bottom: 0，取决于你希望通知栏出现在屏幕的位置 */
		left: 0;
		width: 320rpx;
		background-color: rgba(0, 0, 0, 0.7);
		color: white;
		text-align: center;
		padding: 15rpx;
		border-top-right-radius: 8rpx;
		border-bottom-right-radius: 8rpx;
		z-index: 10000000000000000000000000000000000000000000000;
		/* 确保倒计时显示在最顶部 */
	}

	.curcleTit {
		position: absolute;
		width: 110rpx;
		bottom: -10rpx;
		left: 50%;
		transform: translateX(-50%);
		background-color: #ea9518;
		color: #fff;
		text-align: center;
		border-radius: 10rpx;
		padding: 2rpx 4rpx;
		z-index: 9999999999999999999999999999999999999999999999999999;
	}

	.content {
		/* 确保父容器是相对定位 */
		position: fixed;
		top: 290rpx;
		right: 0;
		/* 		height: 100%;
		width: 100%; */
	}

	.circle-container {
		/* 进度条容器，绝对定位在右上角 */
		position: absolute;
		top: 20px;
		/* 距离顶部的距离，根据需要调整 */
		right: 0;
		/* 距离右侧的距离，根据需要调整 */
		z-index: 10;
		/* 确保它在最上面 */
	}

	.background-overlay {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 50px;
		/* 背景覆盖整个容器宽度 */
		height: 50px;
		/* 背景覆盖整个容器高度 */
		background-color: rgba(0, 0, 0, 0.3);
		margin-left: -25px;
		margin-top: -25px;
		border-radius: 100%;
		/* 黑色背景，60%的透明度 */
		z-index: 0;
		/* 保证背景位于内容下方 */
	}

	.center-image {
		/* 中心图片的样式 */
		position: absolute;
		width: 40px;
		/* 图片大小根据实际情况调整 */
		height: 40px;
		/* 图片大小根据实际情况调整 */
		top: 50%;
		/* 调整以使图片居中 */
		left: 50%;
		margin-top: -20px;
		margin-left: -20px;
		/* transform: translate(-50%, -50%); */
	}

	.shake-animation {
		/* 抖动动画的样式 */
		animation: shake 0.5s;
		animation-iteration-count: infinite;
	}

	@keyframes shake {
		0% {
			transform: translate(1px, 1px) rotate(0deg);
		}

		10% {
			transform: translate(-1px, -2px) rotate(-1deg);
		}

		20% {
			transform: translate(-3px, 0px) rotate(1deg);
		}

		30% {
			transform: translate(3px, 2px) rotate(0deg);
		}

		40% {
			transform: translate(1px, -1px) rotate(1deg);
		}

		50% {
			transform: translate(-1px, 2px) rotate(-1deg);
		}

		60% {
			transform: translate(-3px, 1px) rotate(0deg);
		}

		70% {
			transform: translate(3px, 1px) rotate(-1deg);
		}

		80% {
			transform: translate(-1px, -1px) rotate(1deg);
		}

		90% {
			transform: translate(1px, 2px) rotate(0deg);
		}

		100% {
			transform: translate(1px, -2px) rotate(-1deg);
		}
	}
</style>